<template>
  <div class="registerMain">
    <div class="registerTop flex align-center justify-between">
      <div class="flex align-center"><img src="@/assets/images/logoImg.png" alt="">安全风险评估</div>
      <span>欢迎成为安全风险评估系统用户</span>
    </div>
    <div v-loading="loading">
      <div class="registerHeaderMain">
        <div class="registerHeaderBox flex align-center justify-between">
          <div class="left flex align-center">
            <img src="@/assets/images/logoImgColor.png" alt="loog">
            <div>免费注册</div>
          </div>
          <div class="right">
            已有账号？<a href="javascript:;" @click="$router.push('/login')">立即登录</a>
          </div>
        </div>
      </div>
      <!--注册信息-->
      <div class="registerBodyMain">
        <div class="registerBodyBox">
          <el-form ref="form" label-position="top" :model="form" :rules="rules">
            <div class="left">
              <el-card shadow="never" class="box-card">
                <div slot="header" class="flex align-center justify-between">
                  <span>账号信息</span>
                  <em class="tip">请填写以下注册信息，<b style="color: #f33;">*</b> 为必填项</em>
                </div>
                <div class="body">
                  <el-form-item label="用户姓名" prop="nickname">
                    <el-input
                      v-model="form.nickname"
                      placeholder="请输入用户姓名"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="登录名称" prop="username">
                    <el-input
                      v-model="form.username"
                      placeholder="请输入登录名称"
                      :readonly="readonly"
                      @focus="handlerIptClick"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password" required>
                    <el-input
                      type="password"
                      v-model="form.password"
                      placeholder="请输入密码"
                      :readonly="readonly"
                      @focus="handlerIptClick"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="password2" required>
                    <el-input
                      type="password"
                      v-model="form.password2"
                      placeholder="请再次输入密码"
                      :readonly="readonly"
                      @focus="handlerIptClick"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </div>
              </el-card>
            </div>
            <div class="right">
              <el-card shadow="never" class="box-card">
                <div slot="header" class="flex align-center justify-between">
                  <span>其他信息</span>
                </div>
                <div class="body">
                  <el-form-item label="手机号码" prop="phonenumber">
                    <el-input
                      v-model="form.phonenumber"
                      maxlength="11"
                      placeholder="请输入手机号码"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="电子邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="code" style="position: relative;">
                    <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                    <img :src="codeUrl" @click="getCode" class="codeImg"/>
                  </el-form-item>
                </div>
              </el-card>
            </div>
          </el-form>
        </div>
      </div>
      <!--提交按钮-->
      <div class="btnBox flex align-center justify-center">
        <div>
          <!--        <div class="flex align-center">-->
          <!--          <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>-->
          <!--          <span class="agreement">《安全风险评估用户协议》</span>-->
          <!--        </div>-->
          <el-button type="primary" @click.native.prevent="submitForm('form')">确认提交</el-button>
        </div>
      </div>
    </div>
    <!--版权信息-->
    <div class="copyrightMain flex align-center justify-center">
      安全风险评估 版权所有
    </div>
  </div>
</template>
<script>
import { getCodeImg, register } from '@/api/login'

export default {
  name: '',
  props: {},
  components: {},
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    let validatePhone = (rule, value, callback) => {
      let phoneReg = /^[1][123456789]\d{9}$/
      if (value !== '' && !phoneReg.test(value)) {
        callback(new Error('手机号码格式不正确'))
      } else {
        callback()
      }
    }
    let validateEmail = (rule, value, callback) => {
      let emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
      if (value !== '' && !emailReg.test(value)) {
        callback(new Error('电子邮箱格式不正确'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      form: {
        nickname: '',
        account: '',
        password: '',
        password2: '',
        phonenumber: '',
        email: '',
        code: '',
        uuid: ''
      },
      rules: {
        nickname: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度在2到10个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 2, max: 20, message: '登录名称长度在2到20个字符', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' },
          { min: 5, max: 20, message: '密码长度在5到20个字符', trigger: 'blur' }
        ],
        password2: [
          { validator: validatePass2, trigger: 'blur' },
          { min: 5, max: 20, message: '密码长度在5到20个字符', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      codeUrl: '',
      captchaEnabled: true,
      readonly: true
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCode()
  },
  mounted() {
  },
  methods: {
    handlerIptClick() {
      this.readonly = false
    },
    /**获取验证码**/
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.form.uuid = res.uuid
        }
      })
    },
    /**提交表单**/
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register(this.form).then(res => {
            const username = this.form.username
            this.$alert('<font color=\'red\'>恭喜你，您的账号 ' + username + ' 注册成功！</font>', '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.replace('/login')
            }).catch(() => {
            })
          }).catch(() => {
            this.loading = false
            if (this.captchaEnabled) {
              this.getCode()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.registerMain {
  .registerTop {
    height: 44px;
    padding: 0 30px;
    background: #20222a;

    div {
      img {
        width: 30px;
        height: 30px;
        display: block;
        margin-right: 10px;
      }

      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }


    span {
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
    }
  }

  .registerHeaderMain {
    height: 100px;
    background: #f8f9fb;
    margin-bottom: 20px;

    .registerHeaderBox {
      width: 980px;
      margin: 0 auto;

      .left {
        height: 100px;

        img {
          width: 50px;
          height: 50px;
          display: block;
        }

        div {
          margin-left: 30px;
          padding-left: 30px;
          font-size: 24px;
          color: #333;
          position: relative;

          &::before {
            content: "";
            display: block;
            width: 2px;
            height: 30px;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -15px;
          }
        }
      }

      .right {
        font-size: 16px;

        a {
          color: #409eff;

          &:hover {
            color: #1f80e4;
          }
        }
      }

    }
  }

  .registerBodyMain {
    .registerBodyBox {
      width: 980px;
      margin: 0 auto;
      overflow: hidden;

      .left {
        width: 475px;
        float: left;

        .name {
          font-size: 16px;
        }

        .tip {
          font-style: normal;
          font-size: 14px;
          color: #999;
        }
      }

      .right {
        width: 475px;
        float: right;
      }
    }
  }
}

.btnBox {
  margin: 30px auto;

  .agreement {
    font-size: 14px;
    color: #409eff;
    cursor: pointer;
    position: relative;
    top: -1px;

    &:hover {
      color: #1f80e4;
    }
  }

  button {
    display: block;
    width: 250px;
    height: 50px;
    padding: 0;
    margin: 20px auto 0;
  }
}

.copyrightMain {
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f7f8fa;
  border-top: #dedfe1 1px solid;
  font-size: 14px;
  color: #333;
}

.box-card {
  border: none;

  ::v-deep .el-card__header {
    line-height: 40px;
  }
}

.codeImg {
  position: absolute;
  right: 5px;
  top: 5px;
  height: 40px;
  cursor: pointer;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input__inner {
  height: 50px;
}

::v-deep .el-form-item__label {
  padding-bottom: 0 !important;
}
</style>
